<template>
  <div class="title">
    <!-- TODO:到时候跟路由信息一起做显示 -->
    <span v-if="props.id===2" class="icon ">
      <Icon class="mr-3" icon="line-md:cog-filled"></Icon>
      <span>设置</span>
    </span>
    <span v-else class="icon">
      <Icon class="mr-3" icon="line-md:emoji-grin-filled"></Icon>
      <span>对话</span>
    </span>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  id: Number,
});
console.log(props.id);
</script>

<style lang="scss" scoped>
.title {
  @apply flex items-center mb-5 text-3xl font-bold;
  color: $SH-COLOR;

  .icon {
    @apply flex items-center;
  }
}
</style>
